<template>
    <div>
        <div class="swipper-box">
            <swiper :options="swiperOption" ref="mySwiper-2">
                <swiper-slide v-for="item in swipperList" :key="item.id">
                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media"
                            :style="{ 'height': '40vw', 'background-size': 'cover', 'background-image': 'url(' + item.imgUrl + ')' }">
                        </div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>{{ item.shopper }}</p>
                                <p style="color: #333;">{{ item.content }}</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link" @click="$router.push('../../BoBo/GoodsDetail/' + item.id)">详情</a>
                            <a class="mui-card-link" style="color:red">{{ item.const }}</a>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <div>
            <p style="font-size: 10px; text-align: center;">博神蔬菜店，集天地精华，为您的健康饮食保障</p>
        </div>
    </div>
</template>

<script>
import { METHODS } from 'http';

export default {
    name: 'HomeCardFruits',
    data() {
        return {
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination-2'
                },
                loop: true,
            },
            swipperList: [
                {
                    'id': '017',
                    'imgUrl': require("../../../../img/home/vegetable/1.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需11.4即可带回一斤，快来抢购啦',
                    'shopper': '博神蔬菜店',
                    'const': '￥11.4'
                },
                {
                    'id': '018',
                    'imgUrl': require("../../../../img/home/vegetable/3.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需11.4即可带回一斤，快来抢购啦',
                    'shopper': '博神蔬菜店',
                    'const': '￥11.4'
                },
                {
                    'id': '019',
                    'imgUrl': require("../../../../img/home/vegetable/5.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需11.4即可带回一斤，快来抢购啦',
                    'shopper': '博神蔬菜店',
                    'const': '￥11.4'
                },
                {
                    'id': '020',
                    'imgUrl': require("../../../../img/home/vegetable/4.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需11.4即可带回一斤，快来抢购啦',
                    'shopper': '博神蔬菜店',
                    'const': '￥11.4'
                },
            ]
        }
    }
}
</script>

<style scoped>
.mui-card {
    display: inline-block;
}
</style>